<template>
  <hi-row
    isColumn
    :wrap="false"
    class="viewcontainer"
    v-if="dataset && subDataSet"
  >
    <hi-col flex="280px" style="margin-top: 20px">
      <hi-form
        :dataSource="dataset"
        ref="detailForm"
        :model="dataset.curRecord"
        v-bind="form"
      ></hi-form>
    </hi-col>
    <hi-col flex="auto" :min-height="200">
      <hi-table
        ref="detailTable"
        :dataSource="subDataSet"
        v-bind="dataTable"
        :model="subDataSet.data"
      ></hi-table>
    </hi-col>
  </hi-row>
</template>

<script>
import { HiForm, DataSetContainer, HiNumber, HiTable } from "hi-ui";
import viewBase from "../../base";
import buyMedicineCfg from "./dataset/buyMedicinelist";
import detailCfg from "./dataset/detail";
export default {
  name: "buyMedicineDetail",
  extends: viewBase,
  components: { HiForm, HiTable, HiNumber },

  data() {
    return {
      //数据集
      dataset: null,
      //数据集配置
      datasetCfg: buyMedicineCfg,
      //从表数据集
      subDataSet: null,
      //从表数据集配置
      subDatasetCfg: detailCfg,

      //数据桥梁
      dataBridge: new Map(),
      //数据表格
      dataTable: {
        // isEdit: true,
        // hasSelection: true,
        // hasRowNumber: true,

        columns: [
          {
            name: "buy_order_id",
          },
          {
            name: "drug_code",
          },
          {
            name: "drug_name",
          },
          {
            name: "specifications",
          },
          {
            name: "drug_in_store",
          },
          {
            name: "amount",
          },
          {
            name: "price",
            props: {
              min: 0,
              format: "￥0.00",
              precision: 2,
            },
          },
          {
            name: "money",
            props: {
              min: 0,
              format: "￥0.00",
              precision: 2,
            },
          },

          {
            name: "drug_brand",
          },
          {
            name: "medicare_type",
          },
          {
            name: "procompany",
          },
        ],
      },
      //表单配置
      form: {
        columnsTotal: 4,
        colPercents: [1, 1, 1, 1],
        items: [
          {
            name: "drugstore",
            element: "div",
            injection: "domProps.innerHTML",
            domProps: {
              innerHTML: "",
            },
          },

          {
            element: "div",
            name: "payment_status",
            injection: "domProps.innerHTML",
            // style: {
            //   color: "blue",
            // },
            props: {
              // type: "success",
              // effect: "",
              format: function (val) {
                if (val == 0) {
                  return "未付款";
                } else if (val == 1) {
                  return "已付款";
                } else if (val == 2) {
                  return "已取消";
                }
              },
            },
            domProps: {
              innerHTML: "",
            },
          },

          {
            name: "prescription_id",
            element: "div",
            injection: "domProps.innerHTML",
            domProps: {
              innerHTML: "",
            },
          },
          {
            name: "take_medicine_code",
            element: "div",
            injection: "domProps.innerHTML",
            domProps: {
              innerHTML: "",
            },
          },
          {
            name: "medicine_money",
            element: "div",
            injection: "domProps.innerHTML",
            domProps: {
              innerHTML: "",
            },
            props: {
              format: "￥0.00",
              precision: 2,
            },
          },
          {
            name: "discount_money",
            element: "div",
            injection: "domProps.innerHTML",
            domProps: {
              innerHTML: "",
            },
            props: {
              format: "￥0.00",
              precision: 2,
            },
          },

          {
            name: "total_money",
            element: "div",
            injection: "domProps.innerHTML",
            domProps: {
              innerHTML: "",
            },
            props: {
              format: "￥0.00",
              precision: 2,
            },
          },

          {
            name: "take_drug_method",
            element: "div",
            injection: "domProps.innerHTML",
            domProps: {
              innerHTML: "",
            },
            props: {
              // type: "success",
              // effect: "",
              format: function (val) {
                if (val == 1) {
                  return "自取";
                } else if (val == 2) {
                  return "配送";
                }
              },
            },
          },
          {
            name: "take_drug_address",
            element: "div",
            injection: "domProps.innerHTML",
            domProps: {
              innerHTML: "",
            },
          },
          {
            name: "type",
            element: "div",
            injection: "domProps.innerHTML",
            domProps: {
              innerHTML: "",
            },
            props: {
              // type: "success",
              // effect: "plain",
              format: function (val) {
                return val == 0 ? "处方购药单" : "非处方购药单";
              },
            },
          },
          {
            name: "is_evaluate",
            element: "div",
            injection: "domProps.innerHTML",
            domProps: {
              innerHTML: "",
            },
            props: {
              // type: "success",
              // effect: "plain",
              format: function (val) {
                return val == 0 ? "未评价" : "已评价";
              },
            },
          },
          {
            name: "remark",
            element: "div",
            colspan: 3,
            props: {
              type: "textarea",
              autosize: {
                minRows: 4,
                maxRows: 4,
              },
              maxlength: 200,
            },
            injection: "domProps.innerHTML",
            domProps: {
              innerHTML: "",
            },
          },
        ],
      },
    };
  },
  model: {
    prop: "value",
    event: "valuechange",
  },
  props: {
    value: {
      type: Object,
    },
  },

  computed: {},
  watch: {},
  methods: {},
  mounted() {
    var _this = this;
    //创建主数据集
    this.dataset = this.createDataSet(this.datasetCfg);
    //创建从数据集
    this.subDataSet = this.createDataSet(this.subDatasetCfg, this.dataset);

    //设置数据与组件的关系
    this.dataBridge.set(this.dataset, ["detailForm", "detailTable"]);
    this.flowConfig = { dataset: this.dataset };
    if (this.$route.query.id) {
      this.dataset.load({
        record_id: this.$route.query.id,
      });
    }
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scope>
</style>

